<template>
  <div class="user">
    <!-- <div class="header bg-color-red acea-row row-between-wrapper">
      <div class="picTxt acea-row row-between-wrapper">
        <div class="pictrue"><img :src="userInfo.avatar" /></div>
        <div class="text">
          <div class="acea-row row-middle">
            <div class="name line1">{{ userInfo.nickname }}</div>
            <div class="member acea-row row-middle" v-if="userInfo.vip">
              <img :src="userInfo.vip_icon" />{{ userInfo.vip_name }}
            </div>
          </div>
          <router-link :to="'/user/data'" class="id" v-if="userInfo.phone">
            ID：{{ userInfo.uid || 0
            }}<span class="iconfont icon-bianji1"></span>
          </router-link>
          <router-link :to="'/user/binding'" class="binding" v-else>
            <span>绑定手机号</span>
          </router-link>
        </div>
      </div>
      <span
        class="iconfont icon-shezhi"
        @click="$router.push({ path: '/user/data' })"
      ></span>
    </div> -->
    <!-- <div class="wrapper">
      <div class="nav acea-row row-middle">
        <router-link :to="{ path: '/user/account' }" class="item">
          <div>我的余额</div>
          <div class="num">{{ userInfo.now_money || 0 }}</div>
        </router-link>
        <router-link
          :to="'/user/user_promotion'"
          class="item"
          v-if="userInfo.is_promoter === 1 || userInfo.statu === 2"
        >
          <div>当前佣金</div>
          <div class="num">{{ userInfo.brokerage_price || 0 }}</div>
        </router-link>
        <router-link :to="'/user/integral'" class="item" v-else>
          <div>当前积分</div>
          <div class="num">{{ userInfo.integral || 0 }}</div>
        </router-link>
        <router-link :to="'/user/user_coupon'" class="item">
          <div>优惠券</div>
          <div class="num">{{ userInfo.couponCount || 0 }}</div>
        </router-link>
      </div>
      <div class="myOrder">
        <div class="title acea-row row-between-wrapper">
          <div>我的订单</div>
          <router-link :to="'/order/list/'" class="allOrder">
            全部订单<span class="iconfont icon-jiantou"></span>
          </router-link>
        </div>
        <div class="orderState acea-row row-middle">
          <router-link :to="{ path: '/order/list/' + 0 }" class="item">
            <div class="pictrue">
              <img src="@assets/images/dfk.png" />
              <span
                class="order-status-num"
                v-if="orderStatusNum.unpaid_count > 0"
                >{{ orderStatusNum.unpaid_count }}</span
              >
            </div>
            <div>待付款</div>
          </router-link>
          <router-link :to="{ path: '/order/list/' + 1 }" class="item">
            <div class="pictrue">
              <img src="@assets/images/dfh.png" />
              <span
                class="order-status-num"
                v-if="orderStatusNum.unshipped_count > 0"
                >{{ orderStatusNum.unshipped_count }}</span
              >
            </div>
            <div>待发货</div>
          </router-link>
          <router-link :to="{ path: '/order/list/' + 2 }" class="item">
            <div class="pictrue">
              <img src="@assets/images/dsh.png" />
              <span
                class="order-status-num"
                v-if="orderStatusNum.received_count > 0"
                >{{ orderStatusNum.received_count }}</span
              >
            </div>
            <div>待收货</div>
          </router-link>
          <router-link :to="{ path: '/order/list/' + 3 }" class="item">
            <div class="pictrue">
              <img src="@assets/images/dpj.png" />
              <span
                class="order-status-num"
                v-if="orderStatusNum.evaluated_count > 0"
                >{{ orderStatusNum.evaluated_count }}</span
              >
            </div>
            <div>待评价</div>
          </router-link>
          <router-link :to="'/order/refund_list'" class="item">
            <div class="pictrue">
              <img src="@assets/images/sh.png" />
              <span
                class="order-status-num"
                v-if="orderStatusNum.refund_count > 0"
                >{{ orderStatusNum.refund_count }}</span
              >
            </div>
            <div>售后/退款</div>
          </router-link>
        </div>
      </div>
      <div class="myService">
        <div class="title acea-row row-middle">我的服务</div>
        <div class="serviceList acea-row row-middle">
          <template v-for="(item, index) in MyMenus">
            <div
              class="item"
              :key="index"
              @click="goPages(index)"
              v-if="item.wap_url"
            >
              <div class="pictrue">
                <img :src="item.pic" />
              </div>
              <div>{{ item.name }}</div>
            </div>
          </template>
          <div
          class="item"
          @click="changeswitch(true)"
          v-if="userInfo.phone && isWeixin"
          &gt;>
          <div class="pictrue"><img src="@assets/images/switch.png" /></div>
         <div>账号切换</div>
         </div>
        </div>
      </div>
    </div>
    <img src="@assets/images/support.png" class="support" />
    <div class="footer-line-height"></div>
    <SwitchWindow
      v-on:changeswitch="changeswitch"
      :switchActive="switchActive"
      :login_type="userInfo.login_type"
    ></SwitchWindow> -->
 

      <el-container>
      <el-header style="padding:0 0;height:136px;">
        <!-- 导航 -->
        <el-row class="header " type="flex" justify="center">
          <el-col :span="18">
            <div class="row-h acea-row row-between">
              <div class="acea-row "> 
                <el-link type="info" href="/" class="el-icon-s-home"> <p >首页</p></el-link>
              </div>
              <div class="news acea-row row-right">
                <div class="userName">
                  <el-link type="info" ><p>{{ userInfo. nickname}}</p></el-link>
                </div>
                <el-link type="info" ><p class="title">消息</p></el-link>
                <el-link type="info" href="/order/list/0"><p class="title">我的订单</p></el-link>
                <el-link type="info" href="/user" ><p class="title">个人中心</p></el-link>
              </div>
             </div>
          </el-col>
        </el-row>
        <!-- 个人中心 -->
        <el-row class="g-row" type="flex" justify="center">
          <el-col style="width:1090px; height: 100px;">
            <div class="f-left acea-row">
              <div class="image"><img :src="logoUrl" ></div>
              <p class="personal">个人中心</p>
            </div>
          </el-col>
        </el-row>

      </el-header>
      <el-container >
        <el-container style="width:1090px;margin:20px auto 0;">
            <el-aside width="180px">
                <div class="side">
                  <el-menu
                  default-active="1-1"
                  active-text-color="#b4a078"
                  @open="handleOpen"
                  @close="handleClose">
                    <el-menu-item-group>
                      <p slot="title" class="sideTitle">我的服务</p>
                      <el-menu-item index="1-1">
                         <router-link to="/user">
                          <p class="sideIetm">个人中心</p>
                        </router-link>
                        </el-menu-item>
                      <el-menu-item index="1-2">
                        <router-link to="/user/vip">
                          <p class="sideIetm">会员中心</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="1-3">
                        <router-link to="/user/add_manage">
                          <p class="sideIetm">地址信息</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="1-4">
                        <router-link to="/collection">
                        <p class="sideIetm">我的收藏</p>
                        </router-link>
                        </el-menu-item>
                      <el-menu-item index="1-5">
                          <router-link to="/user/user_coupon">
                            <p class="sideIetm">优惠券</p>
                          </router-link>
                      </el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                      <p slot="title" class="sideTitle">订单管理</p>
                      <el-menu-item index="2-1">
                        <router-link to="/order/list/0">
                          <p class="sideIetm">我的订单</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="2-2"><router-link to="/order/refund_list"> 
                        <p class="sideIetm">售后/退款</p>
                      </router-link></el-menu-item>
                    </el-menu-item-group>
                </el-menu>
              </div>
            </el-aside>
          <el-main>
            <div class="main">
              <div class="leveMen acea-row">
                <div class="f-left">
                  <div class="infoWrap acea-row">
                    <div class="image"><el-avatar :size="76"  :src="userInfo.avatar"></el-avatar></div>
                    <div class="name"><el-link type="info" ><p>{{ userInfo. nickname}}</p></el-link></div>
                  </div>
                  <div class="growWrap">
                    <div><p>积分>></p></div>
                    <div><el-progress :percentage="50"></el-progress></div>
                  </div>
                </div>
                <div class="f-right acea-row">
                  <div class="item acea-row">
                  <p class="label">我的余额</p>
                  <p class="num">¥{{ userInfo.now_money || 0 }}</p>
                  </div>
                  <div class="item acea-row">
                  <p class="label">我的积分</p>
                  <p class="num">0</p>
                  </div>
                  <div class="item acea-row">
                  <p class="label">当前佣金</p>
                  <p class="num">¥{{ userInfo.brokerage_price || 0 }}</p>
                  </div>
                  <div class="item acea-row">
                  <p class="label">优惠劵</p>
                  <p class="num">{{ userInfo.couponCount || 0 }}</p>
                  </div>
                  <div class="item acea-row">
                  <p class="label">礼品卡</p>
                  <p class="num">0</p>
                  </div>
                  <div class="item acea-row">
                  <p class="label">待领礼包</p>
                  <p class="num">0</p>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="footer">
                  <div class="title">
                    <div class="title-h">未完成订单</div>
                      <router-link
                      :to="'/order/list/0'"
                      class="oder">
                      查看全部订单
                      </router-link>  
                  </div>
                  <Backlog></Backlog>

              </div>
              
          </div>
          </el-main>
        </el-container>
        <el-footer style="padding: 0;">
          <Foot></Foot> 
        </el-footer>
      </el-container>
    </el-container>

  </div>
</template>
<script>
import { getUser, getMenuUser } from "@api/user";
import { isWeixin } from "@utils";
import SwitchWindow from "@components/SwitchWindow";
import Backlog from "@components/Backlog";
import Foot from "@components/Foot";
import { getHomeData } from "@api/public";

const NAME = "User";

export default {
  name: NAME,
  components: {
    SwitchWindow,
    Backlog,
    Foot
  },
  props: {},
  data: function() {
    return {
      userInfo: {},
      MyMenus: [],
      orderStatusNum: {},
      switchActive: false,
      isWeixin: false,
      logoUrl:"",
    };
  },
  watch: {
    $route(n) {
      if (n.name === NAME) this.User();
    }
  },
  mounted: function() {
    let that = this;
      getHomeData().then(res => {
         that.logoUrl = res.data.logoUrl;
       });
    this.User();
    this.MenuUser();
    this.isWeixin = isWeixin();
  },
  methods: {
    changeswitch: function(data) {
      this.switchActive = data;
    },
    User: function() {
      let that = this;
      getUser().then(res => {
        that.userInfo = res.data;
        that.orderStatusNum = res.data.orderStatusNum;
      });
    },
    MenuUser: function() {
      let that = this;
      getMenuUser().then(res => {
        that.MyMenus = res.data.routine_my_menus;
      });
    },
    goPages: function(index) {
      let url = this.MyMenus[index].wap_url;
      if (url === "/user/user_promotion" && this.userInfo.statu === 1) {
        if (!this.userInfo.is_promoter)
          return this.$dialog.toast({ mes: "您还没有推广权限！！" });
      }
      if (url === "/customer/index" && !this.userInfo.adminid) {
        return this.$dialog.toast({ mes: "您还不是客服！！" });
      }

      this.$router.push({ path: this.MyMenus[index].wap_url });
    }
  }
};
</script>

<style scoped>

    .user {
      background-color: #fff;
    }

    .user .footer .title .oder {
      position: absolute;
      line-height: 42px;
      font-size: 14px;
      color: #333;
      font-family: "Microsoft Yahei","微软雅黑",verdana;
      right:20px;
      top: 0;
    }
    .user .footer .title .title-h {
      font-family: "Microsoft Yahei","微软雅黑",verdana;
      font-weight: 400;
      font-size: 16px;
      color: #333;
      line-height: 42px;
    }
    .user .footer .title {
      height: 42px;
      padding: 0 20px;
      background-color: #F4F4F4;
      position: relative;
    }
    .user .footer {
      margin-top: 20px;
      width: 850px;
      max-height: 604px;
      background-color: #fff;
      border: 1px solid #eaeaea;
      overflow: hidden;
    }
    
    .r-link:hover {
      color: #CC9756;
    }

    .user  .main .f-right {
      display: inline-block;
      width: 430px;
      height: 208px;
      padding-left: 50px;
      border-left: 1px dashed rgba(180,160,120,.38);
      padding-top: 35px;
      display: flex;
    }
    .user  .main .f-right .item {
      margin-bottom: 30px;
      width: 185px;
      height: 22px;
      
    }
    .user  .main .f-right .item .label {
      width: 88px;
      padding-right: 20px;
      line-height: 22px;
      font-family: "Microsoft Yahei","微软雅黑",verdana;
      color: #333;
      font-size: 12px;
    }
    .user  .main .f-right .item .num {
      font-family: "Microsoft Yahei","微软雅黑",verdana;
      color: #333;
      font-size: 14px;
      line-height: 22px;
    }
    .user  .main  .leveMen .f-left  .growWrap {
      width: 265px;
      height: 34px;
    }
    .user  .main  .leveMen .f-left .infoWrap .name p{
    width: 185px;
    font-size: 12px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    }
    .user  .main  .leveMen .f-left .infoWrap .image {
      width: 76px;
      height: 76px;
      margin-right: 40px;
    }
    .user  .main  .leveMen .f-left .infoWrap .image  img {
      width: 100%;
      height: 100%;
    }
    .user  .main  .leveMen .f-left .infoWrap {
      width: 318px;
      height: 80px;
      margin-bottom: 30px;
    }
    .user  .main  .leveMen .f-left{
    width: 378px;
    height: 163px;
    margin-top: 50px;
    padding-left: 40px;
    }
    .user  .main  .leveMen{
      width: 850px;
      height: 250px;
      padding: 20px;
      border: 1px solid #eaeaea;
    }
    .user  .main {
      width: 850px;
    }

    .user .side {
      border: 1px solid #eaeaea;
      height:510px;
      padding-top: 24px;
      margin-top: 20px;
    }
    .user .side .sideTitle {
      font-size: 16px;
      color: #333;
      font-weight: 700;
      padding-left: 23px;
    }

    .user .side .sideIetm {
    font-size: 14px;
    padding-left: 23px;
    }
   .user .g-row .f-left .personal {
    display: inline-block;
    padding-left: 17px;
    margin-left: 20px;
    font-size: 24px;
    line-height: 30px;
    font-weight: 400;
    color: #CC9756;
    border-left: 1px solid #CC9756;
    vertical-align: middle;

   }
   .user .g-row .f-left .image  img {
     width: 100%;
     height: 100%;
   }
   .user .g-row .f-left .image {
     width: 126px;
     height: 30px;
  }
  .user .g-row .f-left {
    width: 260px;
    height: 30px;
    margin-top:35px;
  }
  .user .g-row {
   height: 100px;
   border-bottom:1px solid #ccc ;
   box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
 }
 .user .header {
  height: 36px;
  background-color: #333;
 }
 .user .header  .row-h {
   width: 1090px;
   margin: 0 auto;
 }
 .user .header  .home {
   font-size: 12px;
 }
  .user .header .userName  {
    width: 90px;
    height: 36px;
    margin-right: 10px;
    padding: 0 5px
  }
  .user .header .userName p{
    width: 70px;
    font-size: 12px;
    text-align: center;
    line-height: 36px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .user .header .title {
   font-size: 12px;
   border-left:1px solid #ccc ;
   padding: 0 10px;
 }
</style>
